<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
        <el-button type="primary" :size="size" icon="el-icon-plus" @click="showDialog">新增网点</el-button>
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        width="80%"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <outlets-add ref="childRef" :init-data.sync="dialogObj.initData" :type-list="typeList" :is-edit="dialogObj.isEdit"></outlets-add>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
import OutletsAdd from './add'
import utils from 'utils'
import dictObj from '@/store/dictData'

export default {
  name: 'outlets',
  mixins: [mixinTable],
  components: {
    CDialog,
    OutletsAdd
  },
  data(vm) {
    return {
      typeList: [], // 网点类型列表
      // 对话框对象
      dialogObj: {},
      cityCode: '', // 城市编码
      // 表格内操作按钮
      tableInnerBtns: [
        {
          name: '编辑',
          icon: 'el-icon-edit',
          width: 80,
          handle(row) {
            const { id } = row
            vm.showDialog({
              title: '编辑网点',
              isEdit: true,
              type: 0,
              initData: {
                id,
                parkName: row.parkName,
                dutyPerson: row.dutyPerson,
                cityCode: row.cityCode,
                areaName: row.areaName,
                areaCode: row.areaCode,
                parkAddress: row.parkAddress,
                latitude: row.latitude,
                longitude: row.longitude,
                isCooperation: row.isCooperation,
                spaceNums: row.spaceNums,
                parkType: row.parkType,
                parkMoney: row.parkMoney ? row.parkMoney / 100 : '',
                parkDayMoney: row.parkDayMoney ? row.parkDayMoney / 100 : '',
                isTemporary: row.isTemporary,
                remark: row.remark,
                returnDistance: row.returnDistance
              },
              typeList: vm.typeList
            })
          }
        }
        // {
        //   name: '设置电子围栏',
        //   icon: 'el-icon-delete',
        //   handle(row) {
        //     const { id } = row
        //     vm.showDialog({
        //       title: '设置电子围栏',
        //       isEdit: true,
        //       type: 1,
        //       initData: {
        //         id
        //       }
        //     })
        //   }
        // },
        // {
        //   name: '删除电子围栏',
        //   icon: 'el-icon-delete',
        //   handle(row) {
        //     const { id, parkName } = row
        //     vm.confirmTip(`确认删除【${parkName}】网点电子围栏`, () => {
        //       vm.deleteHandle({ id })
        //     })
        //   }
        // },
        // {
        //   name: '查看电子围栏',
        //   icon: 'el-icon-view',
        //   handle(row) {
        //     const { id } = row
        //     vm.showDialog({
        //       title: '查看电子围栏',
        //       isEdit: true,
        //       type: 2,
        //       initData: {
        //         id
        //       }
        //     })
        //   }
        // }
      ],
      tableHeader: [
        {
          label: '网点名称',
          prop: 'parkName',
          fixed: true,
          search: {
            type: 'input',
            prop: 'name'
          }
        },
        {
          label: '所属城市',
          prop: 'cityName',
          width: 100
        },
        {
          label: '所属企业',
          prop: 'companyName'
        },
        {
          label: '所属区域',
          prop: 'areaName',
          width: 100
        },
        {
          label: '网点地址',
          prop: 'parkAddress',
          width: 300
        },
        {
          label: '还车距离(米)',
          prop: 'returnDistance',
          width: 110
        },
        {
          label: '网点类型',
          prop: 'parkType',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.parkType, vm.typeList)
        },
        {
          label: '合作类型',
          prop: 'isCooperation',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.isCooperation, 'cooperationTypeList')
        },
        {
          label: '停车费(小时/元)',
          prop: 'parkMoney',
          width: 120,
          formatter: row => row && utils.formatMoney(row.parkMoney)
        },
        {
          label: '停车费(天/元)',
          prop: 'parkDayMoney',
          width: 120,
          formatter: row => row && utils.formatMoney(row.parkDayMoney)
        },
        {
          label: '责任人',
          prop: 'dutyPerson',
          width: 100
        },
        {
          label: '状态',
          prop: 'isTemporary',
          width: 100,
          setColor: row => (row.isTemporary === 0 ? 'red' : ''),
          formatter: row => row && vm.setTableColumnLabel(row.isTemporary, 'disabledStatus'),
          search: {
            type: 'dict',
            optionsList: dictObj.disabledStatus
          }
        },
        {
          label: '网点描述',
          prop: 'remark',
          inline: true
        }
      ]
    }
  },
  created() {
    this.getTypeList()
    this.fetchData()
  },
  methods: {
    getTypeList() {
      this.$api.outlets
        .fetch('parkCategoryList', {
          rows: 1,
          offset: 20
        })
        .then(res => {
          const typeList = res.map(res => ({ label: res.name, value: res.id }))
          this.typeList = typeList
        })
    },
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime)
      this.isLoading = true
      this.$api.outlets
        .fetch('parkList', {
          ...searchDate,
          ...other,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    /**
     * dialog对话框数据处理
     * @opts {*}
     */
    showDialog(opts) {
      this.dialogObj = {
        isShow: true,
        isEdit: opts.isEdit || false,
        title: opts.title || '新增网点',
        initData: opts.initData,
        typeList: this.typeList
      }
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      childRef.$refs.formRef.validate(valid => {
        if (valid) {
          const { parkMoney, parkDayMoney, ...other } = childRef.formModel
          const curAction = this.dialogObj.isEdit ? 'editPark' : 'savePark'
          this.$api.outlets
            .fetch(curAction, {
              parkMoney: parkMoney * 100,
              parkDayMoney: parkDayMoney * 100,
              ...other
            })
            .then(() => {
              this.responeHandle(this.dialogObj.isEdit ? '更新成功' : '新增成功')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 删除单条表格数据
     * @id {Number}
     */
    deleteHandle(params) {
      this.$api.outlets.fetch('fenceGpsDel', params).then(() => {
        this.$msgTip('删除电子围栏成功')
        this.delResetData()
      })
    }
  }
}
</script>
